import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../global.css';
import { groupStyle } from '../group/group.css';

export const formStyle = style({
	display: 'grid',
	padding: '1em',
	columnGap: '1rem',
	alignItems: 'stretch',
	alignContent: 'start', // veritcal align
	justifyContent: 'center', // horizontal align
});

export const formCellStyle = style({
	position: 'relative',
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
	justifyContent: 'flex-end',
});

globalStyle(`${formCellStyle}>div.caption`, {
	fontSize: '1.1em',
	display: 'block',
	fontWeight: 'bold',
	padding: '0 4px 4px',
	color: vars.color.primaryText,
});

globalStyle(`${formCellStyle}>div.caption>span`, {
	verticalAlign: 'baseline',
});

globalStyle(`${formCellStyle}>div.caption svg`, {
	width: '0.8em',
	height: '0.8em',
	margin: '0 0.2em',
	fill: vars.color.brand,
});

globalStyle(`${formCellStyle}>div.caption>span.help`, {
	float: 'right',
});

globalStyle(`${formCellStyle}>div.notice`, {
	height: '2em',
	lineHeight: '2em',
	color: 'red',
	padding: '0 4px 4px 4px',
	whiteSpace: 'nowrap',
	overflow: 'hidden',
	textOverflow: 'ellipsis',
});

globalStyle(`${formCellStyle}>div.content`, {
	display: 'flex',
	flexDirection: 'column',
});

globalStyle(`${formCellStyle}>div.content>*`, {
	minWidth: 0,
	width: '100%',
});

globalStyle(`${formCellStyle}>div.content>hr`, {
	minWidth: 0,
	width: '100%',
});

globalStyle(`${formCellStyle}>div.content>${groupStyle}`, {
	display: 'flex',
	flexDirection: 'row',
	flexWrap: 'wrap',
	alignItems: 'center',
	minHeight: vars.layout.inputHeight,
});
